<template>
  <div>
    <el-form
        ref="ruleFormRef"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
        :model="information"
        :rules="userInfrmationRules"
    >

      <el-form-item label="头像" prop="avatar">
        <el-upload
            name="avatar"
            method="post"
            :headers="headerObj"
            class="avatar-uploader"
            action="http://www.blogserver.com/api/admin/upload/file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="information.avatar" :src="information.avatar" class="avatar" alt=""/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="账户" prop="userName">
        <el-input type="text" v-model="information.userName" placeholder="请输入账户" maxlength="20"
                  autocomplete="off"/>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input type="text" v-model="information.nickName" placeholder="请输入昵称" maxlength="20"
                  autocomplete="off"/>
      </el-form-item>
      <el-form-item label="签名" prop="signature">
        <el-input type="text" v-model="information.signature" maxlength="50" placeholder="给自己整一个签名吧！"/>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input type="text" v-model="information.tel" maxlength="20" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="email" v-model="information.email" maxlength="20" placeholder="请输入邮箱"/>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="information.age" :min="1" :max="150"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="UpdateInformation(ruleFormRef)">更新</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <ChangePassword></ChangePassword>
    </el-form>

  </div>
</template>

<script setup>
import {GetUserMessage, UpdateUserMessage} from '../../../api/user'
import {onMounted, ref, onUpdated, reactive} from "vue";
import {getToken} from "../../../utils/auth";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue"
import {useStore} from "vuex";
import ChangePassword from './ChangePassword.vue'
import {userInfrmationRules} from "../../../rules/UserFormRules";

const store = useStore();
const ruleFormRef = ref();
const headerObj = reactive({
  "Authorization": "Bearer " + getToken()
});
let information = reactive({
  userName: '',
  nickName: '',
  email: '',
  tel: '',
  age: 0,
  avatar: '',
  signature: ''
});

function beforeAvatarUpload(rawFile) {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

function handleAvatarSuccess(response, uploadFile) {
  information.avatar = response.data;
  store.dispatch('user/setAvatar', response.data);
}

function GetInformation() {
  GetUserMessage().then(response => {
    information.userName = response.data.userName;
    information.nickName = response.data.nickName;
    information.email = response.data.email;
    information.tel = response.data.tel;
    information.age = response.data.age;
    information.avatar = response.data.avatar;
    information.signature = response.data.signature;
  })
}

function UpdateInformation(form) {
  if (!form) return;
  form.validate((valid) => {
    if (valid) {
      UpdateUserMessage(information).then(response => {
        if (response.code === 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
            duration: 5 * 1000
          })
        }
      });
    }
  })
}

onMounted(() => {
  GetInformation();
})

onUpdated(() => {
  GetInformation();
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>